<template>
    <div class="alterName">
        <!-- 修改昵称 -->
        <header class="mui-bar mui-bar-nav bg-color">
            <!--返回按钮-->
            <span class="iconfont icon-fanhui header_fanhui" @tap="gtolast()"></span>
            <!--标题-->
            <h1 class="mui-title">修改昵称</h1>
            <span  class="mui-pull-right Tit" @tap="sendName">确认</span>
        </header>
        <div class="alterNameNeir">
            <div class="line"></div>
            <mt-field placeholder="请填写您要修改昵称" style="top:44px;" v-model="userInfo.name"></mt-field>
            <div class="line"></div>
        </div>
    </div>
</template>

<script>
    import mui from 'static/js/mui'
    import {updateCustomerMessage} from '@/api/user'
    import storage from "@/utils/localstorage"
    import { Toast } from 'mint-ui'
    //prevent用来阻止原生事件，去掉会有惊喜！
    export default {

        data() {
            return {
                 userInfo:{}
            }
        },
        props: {},
        watch: {},
        methods: {
           //返回上一层
            gtolast(){
              // this.sendName()
              this.$router.push('/userMsg');//返回上一层
            },
            sendName(){
                updateCustomerMessage(this.userInfo).then(response => {
                    storage.setLocalstorage('user',response.data)
                    this.$store.commit('SET_USER',response.data)
                    Toast('保存成功')
                    this.$router.push({
                        name:'userMsg',
                    })
                })
            }
        },
        filters: {},
        computed: {},
        created() { 
            this.userInfo = storage.getLocalstorage('user')
        },
        mounted() {
            mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
         }
    }

</script>

<style lang="scss">
    .Tit{
        line-height: 43px;
        font-size: 0.7rem;
        color:#666666;
    }
    .noMoreMsg{
        text-align:center;color:#AEAEAE;
        padding:15px;font-size:0.7rem;
    }
    .bg-color{
        -webkit-box-shadow: 0 0px 0px !important;
        box-shadow: 0 0px 0px !important;
    }
    .mui-bar {
        z-index:2;
        background-color: #fff;
        -webkit-box-shadow:none;
        box-shadow:none;
        border-bottom:1px solid #ddd;
    }
    .header_fanhui{
        line-height: 43px;
        font-size: 0.9rem;
        width: 43px;
    }
    p{
      color:#333333!important;
      margin-bottom:4px;
    }
    .mint-cell-value .mint-field-core {
        line-height: 21px;
        width: 100%;
        height: 40px;
        margin-bottom: 0px;
        padding: 10px 15px;
        -webkit-user-select: text;
        border: none
    }
    .mint-cell-wrapper {
        background-image: none;
        background-image: none;
    }
    .line {
        width: 100%;
        padding: 5px 0px 5px 0px;
        background-color: #f5f5f5;
    }
</style>